---
layout: Layout_resume
---
<p>
  <a href="javascript:void(0);" id="btnZh">中文简体</a>
  <a href="javascript:void(0);" id="btnTw">中文繁体</a>
  <a href="javascript:void(0);" id="btnEn">English</a>
</p>
  <!--banner-->
  <div id="home" class="banner">
    <div class="banner-info">
      <div class="container">
        <div class="col-md-4 header-left">
          <img src="{{ site.baseurl }}/assets/img/wxhead20180301184223.jpg" alt="头像" />
        </div>
        <div class="col-md-8 header-right">
          <h2 k-resid="hi">Hello</h2>
          <h1 k-resid="minename">I'm fang hua</h1>
          <h6 k-resid="profession">Web Designer and Developer</h6>
          <ul class="address">
            <li>
              <ul class="address-text">
                <li>
                  <b>D.O.B</b>
                </li>
                <li>23-06-1980</li>
              </ul>
            </li>
            <li>
              <ul class="address-text">
                <li>
                  <b k-resid="tel">PHONE </b>
                </li>
                <li>+00 111 222 3333</li>
              </ul>
            </li>
            <li>
              <ul class="address-text">
                <li>
                  <b k-resid="place-key">ADDRESS </b>
                </li>
                <li k-resid="place-val">756 global Place, North Sydney, Canada.</li>
              </ul>
            </li>
            <li>
              <ul class="address-text">
                <li>
                  <b k-resid="email-key">E-MAIL </b>
                </li>
                <li>
                  <a href="mailto:example@mail.com" k-resid="email-val"> mail@example.com</a>
                </li>
              </ul>
            </li>
            <li>
              <ul class="address-text">
                <li>
                  <b k-resid="website-key">WEBSITE</b>
                </li>
                <li>
                  <a href="http://w3layouts.com" k-resid="website-val">www.myresume.com</a>
                </li>
              </ul>
            </li>
          </ul>
        </div>
        <div class="clearfix"> </div>
      </div>
    </div>
  </div>
  <!--//banner-->
  <!--top-nav-->
  <div class="top-nav wow">
    <div class="container">
      <div class="navbar-header logo">
        <button k-resid="menu" type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
          Menu
        </button>
      </div>
      <!-- Collect the nav links, forms, and other content for toggling -->
      <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
        <div class="menu">
          <ul class="nav navbar">
            <li>
              <a href="#about" class="scroll" k-resid="about">About</a>
            </li>
            <li>
              <a href="#work" class="scroll" k-resid="experience">Experience</a>
            </li>
            <li>
              <a href="#education" class="scroll" k-resid="education">Education</a>
            </li>
            <li>
              <a href="#skills" class="scroll" k-resid="skills">Skills</a>
            </li>
            <li>
              <a href="#projects" class="scroll" k-resid="mproject">My Projects</a>
            </li>
            <li>
              <a href="#contact" class="scroll" k-resid="contact">Contact</a>
            </li>
          </ul>
          <div class="clearfix"> </div>
        </div>
      </div>
    </div>
  </div>
  <!--//top-nav-->
  <!--about-->
  <div id="about" class="about">
    <div class="container">
      <h3 class="title" k-resid="aboutme"> About Me</h3>
      <div class="col-md-8 about-left">
        <p k-resid="aboutme-cont1">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse laoreet sem sit amet dolor luctus pellentesque.
          Pellentesque eleifend tellus at interdum elementum. Nam egestas molestie elit. Vivamus sed accumsan quam, a mollis
          magna. Nam aliquet eros eget sapien consequat tincidunt at vel nibh. Duis ut turpis mi. Duis nec scelerisque urna,
          sit amet varius arcu. Aliquam aliquet sapien quis mauris semper suscipit. Maecenas pharetra dapibus posuere. Praesent
          odio sem, varius quis dolor vel, maximus dapibus mi. Pellentesque mattis mauris neque. Nam aliquam turpis ante,
          at cursus massa ullamcorper ut. Proin id diam id nisi sagittis pellentesque sed sit amet eros. In porttitor tempus
          nulla, a porta purus commodo sed. Praesent hendrerit nisi nunc, ut porttitor justo pellentesque et ac gravida sem
          mattis. Donec ornare justo nec</p>
        <p k-resid="aboutme-cont2">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse laoreet sem sit amet dolor luctus pellentesque
          Nam egestas molestie elit. Vivamus sed accumsan quam, a mollis magna. Nam aliquet eros eget sapien consequat</p>
      </div>
      <div class="col-md-4 about-right">
        <ul>
          <h5 k-resid="awards">Awards</h5>
          <li k-resid="awards-line1">
            <span class="glyphicon glyphicon-menu-right"></span> Lorem ipsum dolor sit amet cingelit</li>
          <li k-resid="awards-line2">
            <span class="glyphicon glyphicon-menu-right"></span> Curabitur id metus rutrum convallis</li>
          <li k-resid="awards-line3">
            <span class="glyphicon glyphicon-menu-right"></span> Morbi dictum velit vitae porttitor</li>
          <li k-resid="awards-line4">
            <span class="glyphicon glyphicon-menu-right"></span> Fusce at metus id justo ullamcorper</li>
          <li k-resid="awards-line5">
            <span class="glyphicon glyphicon-menu-right"></span> Aliquam ac nisl id justo malesuada </li>
        </ul>
        <div class="clearfix"> </div>
      </div>
      <div class="clearfix"> </div>
    </div>
  </div>
  <!--//about-->
  <!--work-experience-->
  <div id="work" class="work">
    <div class="container">
      <h3 class="title" k-resid="work-title">Work Experience</h3>
      <div class="work-info">
        <div class="col-md-6 work-left">
          <h4>2014 - 2016 </h4>
        </div>
        <div class="col-md-6 work-right">
          <h5>
            <span class="glyphicon glyphicon-briefcase"> </span> <span k-resid="company-name"> Company Name</span></h5>
          <p k-resid="work-cont1">Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam,
            eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo </p>
        </div>
        <div class="clearfix"> </div>
      </div>
      <div class="work-info">
        <div class="col-md-6 work-right work-right2">
          <h4>2013 - 2014 </h4>
        </div>
        <div class="col-md-6 work-left work-left2">
          <h5> <span k-resid="company-name">Company Name</span> 
            <span class="glyphicon glyphicon-briefcase"> </span>
          </h5>
          <p k-resid="work-cont2">Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam,
            eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo </p>
        </div>
        <div class="clearfix"> </div>
      </div>
      <div class="work-info">
        <div class="col-md-6 work-left">
          <h4>2012 - 2013 </h4>
        </div>
        <div class="col-md-6 work-right">
          <h5>
            <span class="glyphicon glyphicon-briefcase"> </span> <span k-resid="company-name">Company Name</span></h5>
          <p k-resid="work-cont3">Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam,
            eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo </p>
        </div>
        <div class="clearfix"> </div>
      </div>
      <div class="work-info">
        <div class="col-md-6 work-right work-right2">
          <h4>2010 - 2012 </h4>
        </div>
        <div class="col-md-6 work-left work-left2">
          <h5> <span k-resid="company-name">Company Name</span> 
            <span class="glyphicon glyphicon-briefcase"></span>
          </h5>
          <p k-resid="work-cont4">Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam,
            eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo </p>
        </div>
        <div class="clearfix"> </div>
      </div>
    </div>
  </div>
  <!--//work-experience-->
  <!--education-->
  <div id="education" class="education">
    <div class="container">
      <h3 class="title" k-resid="learn-title">Education</h3>
      <div class="work-info">
        <div class="col-md-6 work-left">
          <h4 k-resid="learn-edu1">Master Degree - 2010</h4>
        </div>
        <div class="col-md-6 work-right">
          <h5>
            <span class="glyphicon glyphicon-education"> </span> <span k-resid="learn-school-key">University Name</span> </h5>
          <p k-resid="learn-shtodo1">Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam,
            eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo </p>
        </div>
        <div class="clearfix"> </div>
      </div>
      <div class="work-info">
        <div class="col-md-6 work-right work-right2">
          <h4 k-resid="learn-edu2">Diploma in Design - 2010</h4>
        </div>
        <div class="col-md-6 work-left work-left2">
          <h5> <span k-resid="learn-school-key">University Name</span>
            <span class="glyphicon glyphicon-education"></span>
          </h5>
          <p k-resid="learn-shtodo2">Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam,
            eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo </p>
        </div>
        <div class="clearfix"> </div>
      </div>
      <div class="work-info">
        <div class="col-md-6 work-left">
          <h4 k-resid="learn-edu3">Web Design - 2008</h4>
        </div>
        <div class="col-md-6 work-right">
          <h5>
            <span class="glyphicon glyphicon-education"> </span> <span k-resid="learn-school-key">University Name</span></h5>
          <p k-resid="learn-shtodo3">Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam,
            eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo </p>
        </div>
        <div class="clearfix"> </div>
      </div>
    </div>
  </div>
  <!--//education-->
  <!--skills-->
  <div id="skills" class="skills">
    <div class="container">
      <h3 class="title" k-resid="skill-title">Skills</h3>
      <div class="skills-info">
        <div class="col-md-6 bar-grids">
          <h6><span k-resid="design-title">WEB DESIGN</span>
            <span> 80% </span>
          </h6>
          <div class="progress">
            <div class="progress-bar progress-bar-striped active" style="width: 80%">
            </div>
          </div>
          <h6><span k-resid="skill-name">UI DESIGN & DEVELOPER</span>
            <span> 70% </span>
          </h6>
          <div class="progress">
            <div class="progress-bar progress-bar-striped active" style="width: 70%">
            </div>
          </div>
          <h6><span k-resid="skill-name">HTML/CSS</span>
            <span>90% </span>
          </h6>
          <div class="progress">
            <div class="progress-bar progress-bar-striped active" style="width: 90%">
            </div>
          </div>
          <h6><span k-resid="skill-name">PHOTOSHOP</span>
            <span> 75% </span>
          </h6>
          <div class="progress">
            <div class="progress-bar progress-bar-striped active" style="width: 75%">
            </div>
          </div>
        </div>
        <div class="col-md-6 bar-grids">
          <h6><span k-resid="skill-name">PROJECT MANAGEMENT</span>
            <span> 85% </span>
          </h6>
          <div class="progress">
            <div class="progress-bar progress-bar-striped active" style="width: 85%">
            </div>
          </div>
          <h6><span k-resid="skill-name">SOCIAL MEDIA MARKETING</span>
            <span> 95% </span>
          </h6>
          <div class="progress">
            <div class="progress-bar progress-bar-striped active" style="width: 95%">
            </div>
          </div>
          <h6><span k-resid="skill-name">UX DEVELOPER</span>
            <span>80% </span>
          </h6>
          <div class="progress">
            <div class="progress-bar progress-bar-striped active" style="width: 80%">
            </div>
          </div>
          <h6><span k-resid="skill-name">PHP DESIGN</span>
            <span> 60% </span>
          </h6>
          <div class="progress">
            <div class="progress-bar progress-bar-striped active" style="width: 60%">
            </div>
          </div>
        </div>
        <div class="clearfix"> </div>
      </div>
    </div>
  </div>
  <!--//education-->
  <!--portfolio-->
  <div id="projects" class="portfolio">
    <div class="container">
      <h3 class="title wow zoomInLeft animated" data-wow-delay=".5s" k-resid="pro-title">My Projects</h3>
      <div class="sap_tabs">
        <div id="horizontalTab" style="display: block; width: 100%; margin: 0px;">
          <ul class="resp-tabs-list wow fadeInUp animated" data-wow-delay=".7s">
            <li class="resp-tab-item">
              <span k-resid="pro-tab1">All</span>
            </li>
            <li class="resp-tab-item">
              <span k-resid="pro-tab2">Html</span>
            </li>
            <li class="resp-tab-item">
              <span k-resid="pro-tab3"> Photoshop</span>
            </li>
            <li class="resp-tab-item">
              <span k-resid="pro-tab4">Wordpress</span>
            </li>
          </ul>
          <div class="clearfix"> </div>
          <div class="resp-tabs-container">
            <div class="tab-1 resp-tab-content">
              <div class="tab_img">
                <div class="col-md-4 portfolio-grids">
                  <div class="grid">
                    <a href="{{ site.baseurl }}/assets/img/g1.jpg" class="swipebox" title="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis maximus tortor diam, ac lobortis justo rutrum quis. Praesent non purus fermentum, eleifend velit non">
                      <img src="{{ site.baseurl }}/assets/img/g1.jpg" alt="" class="img-responsive" />
                      <div class="figcaption">
                        <h3>
                          <span  k-resid="pro-title">My Project</span>
                        </h3>
                        <p k-resid="pro-intro1">Sarah likes to watch clouds. She's quite depressed.</p>
                      </div>
                    </a>
                  </div>
                </div>
                <div class="col-md-4 portfolio-grids">
                  <div class="grid effect-sarah">
                    <a href="{{ site.baseurl }}/assets/img/g2.jpg" class="swipebox" title="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis maximus tortor diam, ac lobortis justo rutrum quis. Praesent non purus fermentum, eleifend velit non">
                      <img src="{{ site.baseurl }}/assets/img/g2.jpg" alt="" class="img-responsive" />
                      <div class="figcaption">
                        <h3>
                          <span k-resid="pro-title">My Project</span>
                        </h3>
                        <p k-resid="pro-intro2">Sarah likes to watch clouds. She's quite depressed.</p>
                      </div>
                    </a>
                  </div>
                </div>
                <div class="col-md-4 portfolio-grids">
                  <div class="grid">
                    <a href="{{ site.baseurl }}/assets/img/g3.jpg" class="swipebox" title="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis maximus tortor diam, ac lobortis justo rutrum quis. Praesent non purus fermentum, eleifend velit non">
                      <img src="{{ site.baseurl }}/assets/img/g3.jpg" alt="" class="img-responsive" />
                      <div class="figcaption">
                        <h3>
                          <span k-resid="pro-title">My Project</span>
                        </h3>
                        <p k-resid="pro-intro3">Sarah likes to watch clouds. She's quite depressed.</p>
                      </div>
                    </a>
                  </div>
                </div>
                <div class="col-md-4 portfolio-grids">
                  <div class="grid">
                    <a href="{{ site.baseurl }}/assets/img/g4.jpg" class="swipebox" title="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis maximus tortor diam, ac lobortis justo rutrum quis. Praesent non purus fermentum, eleifend velit non">
                      <img src="{{ site.baseurl }}/assets/img/g4.jpg" alt="" class="img-responsive" />
                      <div class="figcaption">
                        <h3>
                          <span k-resid="pro-title">My Project</span>
                        </h3>
                        <p k-resid="pro-intro4">Sarah likes to watch clouds. She's quite depressed.</p>
                      </div>
                    </a>
                  </div>
                </div>
                <div class="col-md-4 portfolio-grids">
                  <div class="grid">
                    <a href="{{ site.baseurl }}/assets/img/g5.jpg" class="swipebox" title="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis maximus tortor diam, ac lobortis justo rutrum quis. Praesent non purus fermentum, eleifend velit non">
                      <img src="{{ site.baseurl }}/assets/img/g5.jpg" alt="" class="img-responsive" />
                      <div class="figcaption">
                        <h3>
                          <span k-resid="pro-title">My Project</span>
                        </h3>
                        <p k-resid="pro-intro5">Sarah likes to watch clouds. She's quite depressed.</p>
                      </div>
                    </a>
                  </div>
                </div>
                <div class="col-md-4 portfolio-grids">
                  <div class="grid">
                    <a href="{{ site.baseurl }}/assets/img/g6.jpg" class="swipebox" title="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis maximus tortor diam, ac lobortis justo rutrum quis. Praesent non purus fermentum, eleifend velit non">
                      <img src="{{ site.baseurl }}/assets/img/g6.jpg" alt="" class="img-responsive" />
                      <div class="figcaption">
                        <h3>
                          <span k-resid="pro-title">My Project</span>
                        </h3>
                        <p k-resid="pro-intro6">Sarah likes to watch clouds. She's quite depressed.</p>
                      </div>
                    </a>
                  </div>
                </div>
                <div class="col-md-4 portfolio-grids">
                  <div class="grid">
                    <a href="{{ site.baseurl }}/assets/img/g7.jpg" class="swipebox" title="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis maximus tortor diam, ac lobortis justo rutrum quis. Praesent non purus fermentum, eleifend velit non">
                      <img src="{{ site.baseurl }}/assets/img/g7.jpg" alt="" class="img-responsive" />
                      <div class="figcaption">
                        <h3>
                          <span k-resid="pro-title">My Project</span>
                        </h3>
                        <p k-resid="pro-intro7">Sarah likes to watch clouds. She's quite depressed.</p>
                      </div>
                    </a>
                  </div>
                </div>
                <div class="col-md-4 portfolio-grids">
                  <div class="grid">
                    <a href="{{ site.baseurl }}/assets/img/g8.jpg" class="swipebox" title="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis maximus tortor diam, ac lobortis justo rutrum quis. Praesent non purus fermentum, eleifend velit non">
                      <img src="{{ site.baseurl }}/assets/img/g8.jpg" alt="" class="img-responsive" />
                      <div class="figcaption">
                        <h3>
                          <span k-resid="pro-title">My Project</span>
                        </h3>
                        <p k-resid="pro-intro8">Sarah likes to watch clouds. She's quite depressed.</p>
                      </div>
                    </a>
                  </div>
                </div>
                <div class="col-md-4 portfolio-grids">
                  <div class="grid">
                    <a href="{{ site.baseurl }}/assets/img/g9.jpg" class="swipebox" title="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis maximus tortor diam, ac lobortis justo rutrum quis. Praesent non purus fermentum, eleifend velit non">
                      <img src="{{ site.baseurl }}/assets/img/g9.jpg" alt="" class="img-responsive" />
                      <div class="figcaption">
                        <h3>
                          <span k-resid="pro-title">My Project</span>
                        </h3>
                        <p k-resid="pro-intro9">Sarah likes to watch clouds. She's quite depressed.</p>
                      </div>
                    </a>
                  </div>
                </div>
                <div class="clearfix"> </div>
              </div>
            </div>
            <div class="tab-1 resp-tab-content">
              <div class="tab_img">
                <div class="col-md-4 portfolio-grids">
                  <div class="grid">
                    <a href="{{ site.baseurl }}/assets/img/g5.jpg" class="swipebox" title="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis maximus tortor diam, ac lobortis justo rutrum quis. Praesent non purus fermentum, eleifend velit non">
                      <img src="{{ site.baseurl }}/assets/img/g5.jpg" alt="" class="img-responsive" />
                      <div class="figcaption">
                        <h3>
                          <span k-resid="pro-title">My Project</span>
                        </h3>
                        <p k-resid="pro-intro10">Sarah likes to watch clouds. She's quite depressed.</p>
                      </div>
                    </a>
                  </div>
                </div>
                <div class="col-md-4 portfolio-grids">
                  <div class="grid">
                    <a href="{{ site.baseurl }}/assets/img/g6.jpg" class="swipebox" title="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis maximus tortor diam, ac lobortis justo rutrum quis. Praesent non purus fermentum, eleifend velit non">
                      <img src="{{ site.baseurl }}/assets/img/g6.jpg" alt="" class="img-responsive" />
                      <div class="figcaption">
                        <h3>
                          <span k-resid="pro-title">My Project</span>
                        </h3>
                        <p k-resid="pro-intro11">Sarah likes to watch clouds. She's quite depressed.</p>
                      </div>
                    </a>
                  </div>
                </div>
                <div class="col-md-4 portfolio-grids">
                  <div class="grid">
                    <a href="{{ site.baseurl }}/assets/img/g7.jpg" class="swipebox" title="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis maximus tortor diam, ac lobortis justo rutrum quis. Praesent non purus fermentum, eleifend velit non">
                      <img src="{{ site.baseurl }}/assets/img/g7.jpg" alt="" class="img-responsive" />
                      <div class="figcaption">
                        <h3>
                          <span k-resid="pro-title">My Project</span>
                        </h3>
                        <p k-resid="pro-intro12">Sarah likes to watch clouds. She's quite depressed.</p>
                      </div>
                    </a>
                  </div>
                </div>
                <div class="clearfix"> </div>
              </div>
            </div>
            <div class="tab-1 resp-tab-content">
              <div class="tab_img">
                <div class="col-md-4 portfolio-grids">
                  <div class="grid">
                    <a href="{{ site.baseurl }}/assets/img/g3.jpg" class="swipebox" title="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis maximus tortor diam, ac lobortis justo rutrum quis. Praesent non purus fermentum, eleifend velit non">
                      <img src="{{ site.baseurl }}/assets/img/g3.jpg" alt="" class="img-responsive" />
                      <div class="figcaption">
                        <h3>
                          <span k-resid="pro-title">My Project</span>
                        </h3>
                        <p k-resid="pro-intro13">Sarah likes to watch clouds. She's quite depressed.</p>
                      </div>
                    </a>
                  </div>
                </div>
                <div class="col-md-4 portfolio-grids">
                  <div class="grid">
                    <a href="{{ site.baseurl }}/assets/img/g1.jpg" class="swipebox" title="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis maximus tortor diam, ac lobortis justo rutrum quis. Praesent non purus fermentum, eleifend velit non">
                      <img src="{{ site.baseurl }}/assets/img/g1.jpg" alt="" class="img-responsive" />
                      <div class="figcaption">
                        <h3>
                          <span k-resid="pro-title">My Project</span>
                        </h3>
                        <p k-resid="pro-intro14">Sarah likes to watch clouds. She's quite depressed.</p>
                      </div>
                    </a>
                  </div>
                </div>
                <div class="col-md-4 portfolio-grids">
                  <div class="grid">
                    <a href="{{ site.baseurl }}/assets/img/g9.jpg" class="swipebox" title="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis maximus tortor diam, ac lobortis justo rutrum quis. Praesent non purus fermentum, eleifend velit non">
                      <img src="{{ site.baseurl }}/assets/img/g9.jpg" alt="" class="img-responsive" />
                      <div class="figcaption">
                        <h3>
                          <span k-resid="pro-title">My Project</span>
                        </h3>
                        <p k-resid="pro-intro15">Sarah likes to watch clouds. She's quite depressed.</p>
                      </div>
                    </a>
                  </div>
                </div>
                <div class="clearfix"> </div>
              </div>
            </div>
            <div class="tab-1 resp-tab-content">
              <div class="tab_img">
                <div class="col-md-4 portfolio-grids">
                  <div class="grid">
                    <a href="{{ site.baseurl }}/assets/img/g2.jpg" class="swipebox" title="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis maximus tortor diam, ac lobortis justo rutrum quis. Praesent non purus fermentum, eleifend velit non">
                      <img src="{{ site.baseurl }}/assets/img/g2.jpg" alt="" class="img-responsive" />
                      <div class="figcaption">
                        <h3>
                          <span k-resid="pro-title">My Project</span>
                        </h3>
                        <p k-resid="pro-intro16">Sarah likes to watch clouds. She's quite depressed.</p>
                      </div>
                    </a>
                  </div>
                </div>
                <div class="col-md-4 portfolio-grids">
                  <div class="grid">
                    <a href="{{ site.baseurl }}/assets/img/g4.jpg" class="swipebox" title="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis maximus tortor diam, ac lobortis justo rutrum quis. Praesent non purus fermentum, eleifend velit non">
                      <img src="{{ site.baseurl }}/assets/img/g4.jpg" alt="" class="img-responsive" />
                      <div class="figcaption">
                        <h3>
                          <span k-resid="pro-title">My Project</span>
                        </h3>
                        <p k-resid="pro-intro17">Sarah likes to watch clouds. She's quite depressed.</p>
                      </div>
                    </a>
                  </div>
                </div>
                <div class="col-md-4 portfolio-grids">
                  <div class="grid">
                    <a href="{{ site.baseurl }}/assets/img/g8.jpg" class="swipebox" title="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis maximus tortor diam, ac lobortis justo rutrum quis. Praesent non purus fermentum, eleifend velit non">
                      <img src="{{ site.baseurl }}/assets/img/g8.jpg" alt="" class="img-responsive" />
                      <div class="figcaption">
                        <h3>
                          <span k-resid="pro-title">My Project</span>
                        </h3>
                        <p k-resid="pro-intro18">Sarah likes to watch clouds. She's quite depressed.</p>
                      </div>
                    </a>
                  </div>
                </div>
                <div class="clearfix"> </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!--ResponsiveTabs-->
      <script src="{{ site.baseurl }}/assets/plugin/easyResponsiveTabs/easyResponsiveTabs.js"></script>
      <script type="text/javascript">
        $(document).ready(function () {
          $('#horizontalTab').easyResponsiveTabs({
            type: 'default', //Types: default, vertical, accordion           
            width: 'auto', //auto or any width like 600px
            fit: true   // 100% fit in a container
          });
        });		
      </script>
      <!--//ResponsiveTabs-->
      <!-- swipe box js -->
      <!-- <script src="{{ site.baseurl }}/assets/plugin/swipebox/jquery.swipebox.min.js"></script> -->
      <!-- <script type="text/javascript">
        jQuery(function ($) {
          $(".swipebox").swipebox();
        });
      </script> -->
      <!-- //swipe box js -->
    </div>
  </div>
  <!--//portfolio-->
  <!--contact -->
  <div class="welcome contact" id="contact">
    <div class="container">
      <h3 class="title" k-resid="contact-title">Contact Us</h3>
      <div class="contact-row">
        <div class="col-md-6 contact-left">
          <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d250261.21285550427!2d-60.42919264432581!3d46.13039392716506!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x4b67ef033cc4082f%3A0xbf0517bb7d9ecd34!2sNorth+Sydney%2C+NS%2C+Canada!5e0!3m2!1sen!2sin!4v1460613320469"></iframe>
        </div>
        <div class="col-md-6 contact-right">
          <div class="address-left">
            <p k-resid="contact-place">756 global Place, North Sydney,
              <br> FA-2305,Canada </p>
          </div>
          <div class="address-right">
            <p><span k-resid="contact-call">Call us</span>: +00 111 222 3333</p>
            <p><span k-resid="contact-email-key">E-mail</span>:
              <a href="mailto:info@example.com" k-resid="contact-mail-val">mail@example.com</a>
            </p>
          </div>
          <div class="clearfix"></div>
          <div class="contact-form">
            <form action="#" method="post">
              <input type="text" name="Name" placeholder="Name" required="">
              <input class="email" name="Email" type="text" placeholder="Email" required="">
              <input class="phone" name="phone" type="text" placeholder="Phone" required="">
              <textarea name="Message" placeholder="Message" required=""></textarea>
              <input type="submit" value="SUBMIT">
            </form>
          </div>
        </div>
        <div class="clearfix"></div>
      </div>
    </div>
  </div>
  <!--//contact -->
